<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue 3 全局构建版本 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- Vue 应用挂载点 -->
    <div id="app">
        <!-- 使用 v-model 指令实现双向数据绑定 -->
        <input type="text" v-model="message">
        <!-- 显示 message 数据 -->
        {{ message }}
    </div>
</body>

<script>
    // 从全局 Vue 对象中解构出 createApp 函数
    const { createApp } = Vue;
    // 创建 Vue 3 应用实例
    const app = createApp({
        // 定义数据模型
        data() {
            return {
                message: 'Hello Vue!'
            };
        }
    });
    // 将应用实例挂载到 id 为 app 的 DOM 元素上
    app.mount('#app');
</script>

</html>